<template>
  <div class="post-card" @click="handlePostClick">
    <div class="post-image">
      <img :src="post.coverImage || post.images?.[0] || '/001.png'" :alt="post.title" />
      <div class="post-overlay">
        <div class="post-actions">
          <div class="action-item">
            <el-icon><CircleCheckFilled /></el-icon>
            <span>{{ post.likeCount || 0 }}</span>
          </div>
          <div class="action-item">
            <el-icon><ChatDotRound /></el-icon>
            <span>{{ post.commentCount || 0 }}</span>
          </div>
          <div class="action-item">
            <el-icon><StarFilled /></el-icon>
            <span>{{ post.collectCount || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="post-content">
      <h3 class="post-title" :title="post.title">{{ post.title }}</h3>
      <div class="post-meta">
        <div class="user-info">
          <img :src="post.user?.avatar || '/001.png'" :alt="post.user?.nickname" class="user-avatar" />
          <span class="username">{{ post.user?.nickname || post.user?.username }}</span>
        </div>
        <div class="post-stats">
          <span class="view-count">{{ post.viewCount || 0 }} 浏览</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { CircleCheckFilled, ChatDotRound, StarFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  post: {
    type: Object,
    required: true
  }
})

const router = useRouter()

const emit = defineEmits(['preview'])

const handlePostClick = () => {
  emit('preview', props.post.id)
}
</script>

<style lang="scss" scoped>
.post-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    .post-overlay {
      opacity: 1;
    }
  }
  
  .post-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    
    .post-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      align-items: flex-end;
      padding: 16px;
      
      .post-actions {
        display: flex;
        gap: 16px;
        width: 100%;
        
        .action-item {
          display: flex;
          align-items: center;
          gap: 4px;
          color: white;
          font-size: 14px;
          font-weight: 500;
          
          .el-icon {
            font-size: 16px;
          }
        }
      }
    }
  }
  
  .post-content {
    padding: 16px;
    
    .post-title {
      margin: 0 0 12px 0;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .post-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .user-info {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .user-avatar {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          object-fit: cover;
        }
        
        .username {
          font-size: 14px;
          color: #666;
          max-width: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      
      .post-stats {
        .view-count {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>
